<template>
  <div class="envCompliance">
    <div class="content">
      <!-- <el-row class="title">
        <el-col  :xs="12" :sm="24" :md="24" :lg="24" :xl="8">
          <span class="title-name"
            >环境场信息统计</span
          >
        </el-col>
        <el-col :sm="24" :xs="24" :md="24" :lg="24" :xl="16"  >
          <div class="right">
            <span>最大值:{{ maxValue }}{{ units }}</span>
            <span>最小值:{{ minValue }}{{ units }}</span>
            <span>平均值:{{ aveValue }}{{ units }}</span>
          </div>
        </el-col>
      </el-row> -->
      <div>
        <BarChart
          :xData="xData"
          :yData="yData"
          :unit="units"
          :type="type"
          :fieldPatternId="fieldPatternId"
        />
        <!-- <BarChart :xData="xData" :yData="yData" :unit="units" /> -->
      </div>
    </div>
    <div class="content">
      <el-row class="title" type="flex" justify="between">
        <el-col>
          <span class="title-name"
            >环境历史达标率
            <!--<span class="unit">(%)</span>--></span
          >
        </el-col>
        <el-col>
          <div class="right">
            <span>近六小时</span>
          </div>
        </el-col>
      </el-row>
      <div>
        <el-empty
          v-show="rateXData.length <= 0"
          description="没有发现场图相关数据"
        ></el-empty>
        <LineChart
          v-if="rateXData.length > 0"
          :xData="rateXData"
          :yData="rateYData"
          unit="频数"
        />
      </div>
    </div>
    <div class="content">
      <el-row class="title" type="flex" justify="between">
        <el-col>
          <span class="title-name"
            >环境变化趋势
            <!--<span class="unit">(%)</span>--></span
          >
        </el-col>
        <el-col>
          <div class="right"></div>
        </el-col>
      </el-row>

      <el-empty
        v-show="pointNameList.length <= 0"
        description="没有发现场图相关数据"
      ></el-empty>
      <div v-if="pointNameList.length > 0">
        <el-radio-group v-model="pointchange" class="my-radio">
          <el-radio
            v-for="(item, index) in pointNameList"
            :key="item.name"
            :label="index"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
        <ManyLineChart :xData="xDataPoint" :yData="yDataPoint" unit="频数" />
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from "./components/barChart";
import LineChart from "./components/lineChart";
import ManyLineChart from "./components/manylineChart";
import {
  periodHealthRate,
  dataApi,
  frequency,
  onlineRate,
} from "@/api/sceneManage";
import moment from "moment";
export default {
  name: "envGroup",
  components: { BarChart, LineChart, ManyLineChart },
  props: {
    fieldPatternId: String,
    type: String,
    ts: [String, Number],
  },
  data() {
    return {
      chart: null,
      tem: {},
      water: {},
      co2: {},
      pm25: {},
      pm10: {},
      width: 180,
      yData: [],
      xData: [],
      units: "",
      rateXData: [],
      rateYData: [],
      maxValue: 0,
      minValue: 0,
      aveValue: 0,
      pointNameList: [],
      pointchange: null,
      pointObjList: [],
      xDataPoint: [],
      yDataPoint: [],
    };
  },
  watch: {
    fieldPatternId(val) {},
    type(val) {
      this.getData();
    },
    pointchange(val) {
      console.log(val);
      this.xDataPoint = this.pointNameList[val].value.data.map((e) =>
        moment(e.ts).format("HH:mm")
      );
      this.yDataPoint = this.pointNameList[val].value.data.map((e) => e.val);
    },
    "$store.state.user.sceneData": {
      deep: true, // 深度监听
      immediate: true, //立即执行
      handler(nval) {},
    },
    "$store.state.user.categories": {
      deep: true, // 深度监听
      immediate: true, //立即执行
      handler(nval) {
        let minValue = nval?.minValue;
        let maxValue = nval?.maxValue;
        let units = nval?.units;
        this.units = units;
        this.xData = [];
        if (nval) {
          if (units == "℃") {
            for (let i = minValue; i <= maxValue + 0.1; i += 0.1) {
              this.xData.push(Math.floor(i * 10) / 10);
            }
          } else {
            for (let i = minValue; i <= maxValue; i += 1) {
              this.xData.push(Math.floor(i * 10) / 10);
            }
          }

          this.getYData();
        }
      },
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
  },
  methods: {
    resizeHandler(e) {
      if (window.innerWidth <= 1670) {
        this.width = 150;
      } else {
        this.width = 170;
      }
    },
    getYData() {
      this.yData = [];
      let newArr = [];
      if (this.$store.state.user.sceneData) {
        if (this.units == "℃") {
          newArr = this.$store.state.user.sceneData.map((e) => {
            return Math.floor(e.val * 10) / 10;
          });
        } else {
          newArr = this.$store.state.user.sceneData.map((e) => {
            return Math.floor(e.val);
          });
        }
      }
      this.maxValue = this.getMaxValue(newArr);
      this.minValue = this.getMinValue(newArr);
      this.aveValue = this.getAveValue(newArr);
      for (let i = 0; i < this.xData.length; i++) {
        const element = this.xData[i];
        let numArr = newArr.filter((e) => {
          return e == element;
        });
        this.yData.push(numArr.length);
      }
    },
    getMaxValue(arr) {
      return Math.max(...arr);
    },
    getMinValue(arr) {
      return Math.min(...arr);
    },
    getAveValue(arr) {
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
      }
      return Math.round((sum / arr.length) * 10) / 10;
    },
    getData() {
      let data = {
        fieldPatternId: this.fieldPatternId,
        dataType: this.type,
        //start: 1704172623000,
        //end: 1704194223000,
        start: this.ts - 3600000 * 6,
        end: this.ts,
      };
      //达标率
      periodHealthRate(data).then((res) => {
        this.rateXData = res.value.data.map((e) => {
          return moment(e.ts).format("HH:mm");
        });
        this.rateYData = res.value.data.map((e) => {
          return e.val * 100;
        });

      })
      //测点时序图

      let data1 = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
      };
      onlineRate(data1).then((res) => {
        let value = res.value;
        dataApi(data).then((res) => {
          this.pointObjList = res.value;
          // this.xDataPoint = this.pointObjList[0].data.map((e) =>
          //   moment(e.ts).format("HH:mm")
          // );
          // this.yDataPoint = this.pointObjList[0].data.map((e) => e.val);
          this.pointNameList = this.pointObjList.map((e) => {
            return {
              name: this.getPointName(e.labels.coordinate, value),
              value: e,
            };
          });
          this.sortData(this.pointNameList);
          this.pointchange = 0;
        });
      });
    },
    sortData(pointNameList) {
      pointNameList.sort((a, b) => {
        return a.name.localeCompare(b.name);
      });
    },
    getPointName(point, list) {
      for (let i = 0; i < list.length; i++) {
        const ele = list[i];
        if (ele.coordinate.x == point.x && ele.coordinate.y == point.y) {
          return ele.point;
        }
      }
    },
  },
};
</script>
<style lang="scss">
.my-radio {
  .el-radio {
    margin-right: 0px;
  }
  .el-radio__label {
    display: inline-block;
    width: 40px !important;
    padding-left: 5px;
  }
}
.envCompliance {
  background-color: #fff;
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  .content{
    .el-empty{
      height: 160px;
    }
    .el-empty__image{
      width: 80px;
    }
  }
  .flex-box {
    padding: 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    .content-flex1,
    .content-flex3 {
      height: 370px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
  }
  .title {
    align-items: center;
    .title-name {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      color: #000000;

      .unit {
        // font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #707070;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: rgba(99, 110, 120, 1);
    }
    .env-type {
      font-size: 12px;
      font-weight: 400;
      //   line-height: 16px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #2d9dff;
      }
      .half-clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #ffad32;
      }
      .pollution-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #b6c2d2;
      }
    }
  }
}
@media screen and (max-width: 1670px) {
  .circle-box {
    margin: auto;
    position: relative;
    text-align: center;
    width: 145px;
    .rate {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
      text-align: center;
    }

    .excellent {
      color: green;
      font-size: 18px;
    }
    .better {
      color: #00cc33;
      font-size: 18px;
    }
    .good {
      color: blue;
      font-size: 18px;
    }
    .secondary {
      color: #0099ff;
      font-size: 18px;
    }
    .poor {
      color: #ff6600;
      font-size: 18px;
    }
    .bad {
      color: red;
      font-size: 18px;
    }
    .circle-center {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top: -40px;
      .num {
        font-size: 36px;
        font-weight: 400;
        line-height: 43px;
        color: #0a0a0a;
      }
      .name {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #707070;
      }
    }
  }
  .title {
    align-items: center;
    .title-name {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      color: #000000;

      .unit {
        // font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #707070;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      color: rgba(99, 110, 120, 1);
    }
    .env-type {
      font-size: 12px;
      font-weight: 400;
      //   line-height: 16px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #2d9dff;
      }
      .half-clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #ffad32;
      }
      .pollution-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #b6c2d2;
      }
    }
  }
}
</style>
